<template>
	<div class="add"><el-button type="primary" @click="add">添加</el-button></div>
	<el-dialog
			    v-model="dialogVisible_add"
			    title="Tips"
			    width="500"
			  >
			      <el-select
			        v-model="provincevalue"
			        placeholder="请选择省"
			        size="large"
			        style="width: 240px"
					@change="provinceChange"
			      >
			        <el-option
			          v-for="item in provinceData"
			          :key="item.value"
			          :label="item.label"
			          :value="item.label"
			        />
			      </el-select>
				  <el-select
				    v-model="cityvalue"
				    placeholder="请选择市"
				    size="large"
				    style="width: 240px"
					@change="cityChange"
				  >
				    <el-option
				      v-for="item in city"
				      :key="item.value"
				      :label="item.label"
				      :value="item.label"
				    />
				  </el-select>
				  <el-select
				    v-model="areavalue"
				    placeholder="请选择区"
				    size="large"
				    style="width: 240px"
				  >
				    <el-option
				      v-for="item in area"
				      :key="item.value"
				      :label="item.label"
				      :value="item.label"
				    />
				  </el-select>
			    <!-- <el-input type="text" v-model="ssq" placeholder="请输入添加的省市区"></el-input> -->
			    <el-input type="text" v-model="addr_detail" placeholder="请输入添加的详细地址"></el-input>
			    <el-input type="text" v-model="mobile" placeholder="请输入添加的手机号"></el-input>
			    <el-input type="text" v-model="consignee" placeholder="请输入添加的收件人"></el-input>
				<el-select
				      v-model="userValue"
				      placeholder="请选择用户"
				      size="large"
				      style="width: 240px"
				    >
				      <el-option
				        v-for="item in options"
				        :key="item.id"
				        :label="item.name"
				        :value="item.id"
				      />
				    </el-select>
				<div>是否默认地址<el-switch v-model="selected" /></div>
			    <template #footer>
			      <div class="dialog-footer">
			        <el-button @click="dialogVisible_add = false">Cancel</el-button>
			        <el-button type="primary" @click="addSubmit">
			          Confirm
			        </el-button>
			      </div>
			    </template>
		</el-dialog>
	<el-dialog
		    v-model="dialogVisible_update"
		    title="Tips"
		    width="500"
		  >
		  <el-select
		    v-model="provincevalue"
		    placeholder="请选择省"
		    size="large"
		    style="width: 240px"
		  	@change="provinceChange"
		  >
		    <el-option
		      v-for="item in provinceData"
		      :key="item.value"
		      :label="item.label"
		      :value="item.label"
		    />
		  </el-select>
		  <el-select
		    v-model="cityvalue"
		    placeholder="请选择市"
		    size="large"
		    style="width: 240px"
		  	@change="cityChange"
		  >
		    <el-option
		      v-for="item in city"
		      :key="item.value"
		      :label="item.label"
		      :value="item.label"
		    />
		  </el-select>
		  <el-select
		    v-model="areavalue"
		    placeholder="请选择区"
		    size="large"
		    style="width: 240px"
		  >
		    <el-option
		      v-for="item in area"
		      :key="item.value"
		      :label="item.label"
		      :value="item.label"
		    />
		  </el-select>
		    <!-- <el-input type="text" v-model="ssq" placeholder="请输入添加的省市区"></el-input>  -->
		    <el-input type="text" v-model="addr_detail" placeholder="请输入要修改的详细地址"></el-input>
		    <el-input type="text" v-model="mobile" placeholder="请输入要修改的手机号"></el-input>
		    <el-input type="text" v-model="consignee" placeholder="请输入要修改的收件人"></el-input>
			<el-select
			      v-model="userValue"
			      placeholder="请选择用户"
			      size="large"
			      style="width: 240px"
			    >
			      <el-option
			        v-for="item in options"
			        :key="item.id"
			        :label="item.name"
			        :value="item.id"
			      />
			    </el-select>
			<div>是否默认地址<el-switch v-model="selected" /></div>
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="dialogVisible_update = false">Cancel</el-button>
		        <el-button type="primary" @click="updateSubmit">
		          Confirm
		        </el-button>
		      </div>
		    </template>
		  </el-dialog>
		  <el-dialog
		    v-model="dialogVisible_del"
		    title="Tips"
		    width="500"
		  >
		    确认要删除 {{delName}} 吗？
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="dialogVisible_del = false">Cancel</el-button>
		        <el-button type="primary" @click="delSubmit">
		          Confirm
		        </el-button>
		      </div>
		    </template>
		  </el-dialog>
	<el-table :data="tableData" style="width: 1200px;">
	  <el-table-column label="省市区" width="200">
		  <template #default="scope">
			  {{scope.row.province_name}}
			  {{scope.row.city_name}}
			  {{scope.row.area_name}}
		  </template>
	  </el-table-column>
	  <el-table-column prop="addr_detail" label="详细地址" width="280" />
	  <el-table-column prop="consignee" label="收件人"></el-table-column>
	  <el-table-column prop="mobile" label="手机号" width="200"></el-table-column>
	  <el-table-column prop="is_default" label="默认地址"></el-table-column>
	  <el-table-column prop="name" label="用户名"></el-table-column>
	  <el-table-column prop="createTime" label="创建时间" width="200"/>
	  <el-table-column prop="updateTime" label="更新时间" width="200"/>
			<el-table-column fixed="right" width="200">
				<template #header>操作</template>
				<template #default="scope">
				  <el-button type="warning" @click="update(scope.row)">编辑</el-button>
				  <el-button type="danger" @click="del(scope.row.id,scope.row.consignee)">删除</el-button>
				</template>
			</el-table-column>
	</el-table>
</template>

<script setup>
	import {ref} from 'vue'
	const tableData = ref([])
	import {http} from "../components/http.js"
	import provinceData from "../components/city-data/province.js"
	import cityData from "../components/city-data/city.js"
	import areaData from "../components/city-data/area.js"
	const city = ref([])
	const area = ref([])
	const provincevalue = ref("")
	const cityvalue = ref("")
	const areavalue = ref("")
	const consignee = ref("")
	const mobile = ref(undefined)
	const addr_detail = ref("")
	const selected = ref(false)
	 const userValue = ref(undefined)
	function query(){
		http({url:"/queryAddress",method:"get"}).then(res=>{
			tableData.value = res.data.data
		})
	}
	query()
	const provinceIndex = ref(0)
	const cityIndex = ref(0)
	function provinceChange(value){
		console.log(value,"p")
		provinceData.forEach((item,i)=>{
			if(item.label==value){
				city.value = cityData[i]
				provinceIndex.value = i
			}
		})
	}
	function cityChange(value){
		console.log(value,"c")
		console.log(cityData[provinceIndex.value])
		cityData[provinceIndex.value].forEach((item,i)=>{
			if(item.label==value){
				area.value = areaData[provinceIndex.value][i]
			}
		})
	}
	const dialogVisible_add = ref(false)
	const dialogVisible_update = ref(false)
	const dialogVisible_del = ref(false)
	const updateId = ref(undefined)
	const delId = ref(undefined)
	const options = ref([])
	function add(){
		dialogVisible_add.value = true
		http({url:"/queryYddUser",method:"get"}).then(res=>{
			options.value = res.data.data
		})
	}
	function addSubmit(){
		http({url:"/addAddress",method:"post",data:{province:provincevalue.value,city:cityvalue.value,area:areavalue.value,addr_detail:addr_detail.value,mobile:mobile.value,consignee:consignee.value,userValue:userValue.value,selected:selected.value}}).then(res=>{
			dialogVisible_add.value = false
			query()
		})
	}
	const delName = ref("")
	function del(id,consignee){
		dialogVisible_del.value = true
		delId.value = id
		delName.value = consignee
	}
	function delSubmit(){
		http({url:"/delAddress?id="+delId.value,method:"get"}).then(res=>{
			dialogVisible_del.value = false
			query()
		})
	}
	const updateName = ref("")
	const createTime = ref(undefined)
	function update(r){
		dialogVisible_update.value = true
		updateId.value = r.id
		updateName.value = r.name
		http({url:"/queryYddUser",method:"get"}).then(res=>{
			options.value = res.data.data
		})
		addr_detail.value = r.addr_detail
		mobile.value = r.mobile
		consignee.value = r.consignee
		userValue.value = r.userId
		selected.value = r.is_default
		provincevalue.value = r.province
		cityvalue.value = r.city
		areavalue.value = r.area
		createTime.value = r.createTime
	}
	function updateSubmit(){
		http({url:'/updateAddress',method:"post",data:{id:updateId.value,createTime:createTime.value,province:provincevalue.value,city:cityvalue.value,area:areavalue.value,addr_detail:addr_detail.value,mobile:mobile.value,consignee:consignee.value,userValue:userValue.value,selected:selected.value}}).then(res=>{
			dialogVisible_update.value = false
			query()
		})
	}
</script>

<style>
</style>